<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket STOMP Chat</title>
    <!-- 引入 SockJS 和 Stomp.js 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.5/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<h1>WebSocket STOMP Chat</h1>

<div id="chat">
    <input type="text" id="name" placeholder="你的名字" />
    <button id="connect" onclick="connect();">连接</button>
    <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    <br /><br />
    <textarea id="messages" rows="10" cols="50" readonly></textarea>
    <br />
    <input type="text" id="message" placeholder="键入消息..." />
    <button onclick="sendMessage()">发送</button>
</div>

<script type="text/javascript">
    let stompClient = null;

    function connect() {
        // 创建 SockJS 连接
        const socket = new SockJS('/ws');
        stompClient = Stomp.over(socket);

        // 连接到 WebSocket 服务器并订阅消息主题
        stompClient.connect({}, function (frame) {
            console.log('连接: ' + frame);
            // 订阅群聊 topic
            // 订阅 /topic/messages 路径，接收服务器发送的消息
            // 订阅地址要和 @SendTo 或者 @SendToUser 注解的路径一致
            stompClient.subscribe('/topic/messages', function (message) {
                showMessage(JSON.parse(message.body).content);
            });

            // 订阅私聊 queue
            // 订阅私聊消息队列
            stompClient.subscribe('/user/queue/messages', function (message) {
                showMessage(JSON.parse(message.body).content);
            });

            // 发送连接信息（可选）
            const name = document.getElementById('name').value;
            if (name) {
                // 发送消息，需要带上 /app 前缀，然后接 @MessageMapping 注解的路径
                stompClient.send("/app/sendMessage", {}, JSON.stringify({'name': name}));
            }
        }, function (error) {
            console.error('连接失败:', error);
            alert('无法连接到 WebSocket 服务器.');
        });
    }

    function sendMessage() {
        const name = document.getElementById('name').value;
        const message = document.getElementById('message').value;
        if (stompClient && stompClient.connected) {
            // 发送消息，需要带上 /app 前缀，然后接 @MessageMapping 注解的路径
            stompClient.send("/app/sendMessage", {}, JSON.stringify({
                'name': name,
                'content': message
            }));
            document.getElementById('message').value = ''; // 清空输入框
        } else {
            alert('未连接到 WebSocket 服务器.');
        }
    }

    function showMessage(message) {
        const messagesArea = document.getElementById('messages');
        const newMessage = document.createElement('p');
        newMessage.textContent = message;
        messagesArea.appendChild(newMessage);
        messagesArea.scrollTop = messagesArea.scrollHeight; // 滚动到底部
    }

    // 页面加载时尝试自动连接（可选）
    window.onload = function() {
        connect();
    };
</script>
</body>
</html>